<template>
  <div>
    <el-dialog
        :title="`已${title}`"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :before-close="handleClose"
        width="90%"
    >
      <el-form label-position="top" label-width="80px" :model="formLabelAlign" size="mini">
        <el-form-item :label="`${title+'时间:'}`" class="time">
          <el-button @click="handleShowTime">{{formLabelAlign.time === '' ? `${$t('m.choose')+title+'时间'}`:formLabelAlign.time}}</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleOk">提 交</el-button>
      </span>
      <div class="select-time">
        <van-datetime-picker
            v-if="showTime"
            v-model="currentDate"
            type="datetime"
            title="发车时间"
            @cancel="handleCancel"
            @confirm="handleTime"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { $transManagement } from "@/api/transport"
import { Notify } from "vant"

export default {
  // 组件属性、变量
  props: ['id','title','state'],
  // 变量
  data() {
    return {
      dialogVisible: true,
      showTime: false,
      formLabelAlign: {
        time: ''
      },
      currentDate: new Date()
    }
  },
  // 使用其他组件
  components: {
    Notify
  },
  // 方法
  methods: {
    handleClose() {
      this.$emit('handleClose')
    },
    handleCancel() {
      this.showTime = false
    },
    handleTime(value) {
      const date = new Date(value)
      const time = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours() > 9 ? date.getHours():'0'+date.getHours()}:${date.getMinutes() > 9 ? date.getMinutes():'0'+date.getMinutes()}`
      this.formLabelAlign.time = time
      this.showTime = false
    },
    handleShowTime() {
      if (this.formLabelAlign.time !== '')
        this.currentDate = new Date(this.formLabelAlign.time)
      this.showTime = true
    },
    handleOk() {
      if (this.formLabelAlign.time === '') return this.$msg.fail(`请选择${this.title}时间`)
      if (this.state == 4) {
        const obj = {
          startDate: this.formLabelAlign.time + ':00',
          ids: [this.id]
        }
        $transManagement
            .carStart(obj)
            .then(res => {
              if (res.status !== 200) return this.$msg.fail(res.message || res.msg || '出错了')
              Notify({ type: 'success', message: res.msg || res.message || '提货成功' })
              setTimeout(() => {
                this.$router.go(-1)
              },300)
            })
            .catch(err => this.$msg.fail(err.message || err.msg || '出错了'))
      }
      else {
        const obj = {
          arriveDate: this.formLabelAlign.time + ':00',
          ids: [this.id]
        }
        $transManagement
          .carArrived(obj)
          .then(res => {
            if (res.status !== 200) return this.$msg.fail(res.message || res.msg || '出错了')
            Notify({ type: 'success', message: res.msg || res.message || '到达成功' })
            setTimeout(() => {
              this.$router.go(-1)
            },300)
          })
          .catch(err => this.$msg.fail(err.message || err.msg || '出错了'))
      }

    }
  },
  // 生命周期函数
  created() {
  }
}
</script>

<style scoped>
/deep/.el-button {
  flex: 1;
  padding: 3.333vw 14.222vw;
}
/deep/.el-dialog__close {
  display: none;
}
/deep/.el-dialog__header {
  padding: 10px;
  font-weight: bold;
  border-bottom: 1px solid #f1f1f1;
}
/deep/.el-dialog__body {
  padding: 10px;
}
/* 修改按钮长度 */
/deep/.time .el-button {
  width: 100%;
  padding-top: 2.333vw !important;
  padding-bottom: 2.333vw !important;
}
/deep/.el-dialog__wrapper {
  scroll: no;
  overflow: hidden;
}
</style>
